<template>
    <div class="header wrap" @click="chanIsShowToast(false)">
        <div class="l">
            <h1><a href=""><img src="@/assets/img/indexLogo.6f8ac4f0.png"></a></h1>
        </div>
        <div class="c">
            <ul class="nav">
                <router-link tag="li" to="/Index" active-class="active">首页</router-link>
                <router-link tag="li" to="/Gift" active-class="active">全部礼品</router-link>
                <router-link tag="li" to="/UserCenter" active-class="active">个人中心</router-link>
                <router-link tag="li" to="/MyList" active-class="active">我的订单</router-link>
                <router-link tag="li" to="/Free" active-class="active">专属福利</router-link>
            </ul>
        </div>
        <div class="r">
            <input type="text" placeholder="请输入要找的商品" @keyup.enter="toSearch" v-model="userKWD">
            <span><img width="15px" height="15px" src="@/assets/img/search.png" alt="" 
                @click="toSearch"></span>
        </div>
    </div>
</template>

<script>
import {mapMutations} from "vuex"
export default {
    name: 'Header',

    data() {
        return {
            userKWD:""
        };
    },
    created() {
        // this.$router.push(`/Gift?keyword=${this.userKWD}`)
    },
    mounted() {
        
    },

    methods: {
        ...mapMutations({
            chanIsShowToast:"showToast/chanIsShowToast"
        }),
        toSearch(){
           this.$router.push(`/Gift?keyword=${this.userKWD}`)
           console.log(this.userKWD);
        //    刷新页面，必须刷新才能使二次搜索生效
           window.location.reload();
        }
    },
};
</script>

<style lang="less">
  .header{
     height: 122px;
     background-color: antiquewhite;
     display: flex;
     justify-content: space-between;
     align-items: center;
     .c .nav{
        display: flex;
        width: 500px;
        justify-content: space-between;
        li{
            cursor: pointer;
            &.active{
                color: #0a328e;
                font-weight: bold;
            }
        }
     }
     .r {
        display: flex;
        input{
        width: 214px;
        height: 32px;
        border: 1px solid #ddd;
        border-radius: 10px 0px 0px 10px;
        text-indent: 10px;
       }
       span{
          width: 50px;
          height: 32px;
          border-radius: 0px 15px 15px 0;
          background: #0a328e;
        //   行内元素不能设置宽高
          display: flex;
          align-items: center;
          justify-content: center;
          cursor: pointer;
       }
    }
}
</style>